<template>
    <div style="display:inline;">
        <el-popover ref="UserDetail" placement="top-start" width="350" trigger="hover">
            <div class="mt-element-list">
                <div class="mt-list-head list-simple ext-1 font-white bg-green-sharp">
                    <div class="list-head-title-container">
                        <h3 class="list-title">{{user.Name}}</h3>
                    </div>
                </div>
                <div class="mt-list-container list-simple ext-1">
                    <ul>
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                性别
                            </div>
                            <div class="list-item-content">
                                {{user.Sex == 'FEMALE' ? '女' : '男'}}
                            </div>
                        </li>
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                出生年月
                            </div>
                            <div class="list-item-content">
                                {{user.Birth.substr(0, 10)}}
                            </div>
                        </li>                        
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                国籍
                            </div>
                            <div class="list-item-content">
                                {{location}}
                            </div>
                        </li>
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                年龄
                            </div>
                            <div class="list-item-content">
                                {{user.Age}} 岁
                            </div>
                        </li>
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                证件号码
                            </div>
                            <div class="list-item-content">
                                {{user.IdNumber}}
                            </div>
                        </li>                          
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                联系电话
                            </div>
                            <div class="list-item-content">
                                {{user.Phone}}
                            </div>
                        </li>
                        <li class="mt-list-item">
                            <div class="list-icon-container">
                                电子邮件
                            </div>
                            <div class="list-item-content">
                                <a :href="`mailto:${user.Email}`">
                                    {{user.Email}}
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </el-popover>
        <span v-popover:UserDetail style="cursor:pointer">{{user.Name}}</span>
    </div>
</template>

<script>

import {LocationFormat} from 'web/utils';

export default {
    props: {
        'user': {
            type: Object
        }
    },
    computed: {
        location() {
            let local = LocationFormat(this.user.Country, this.user.State);
            return `${local.country} ${local.state}`;
        }
    },
    data() {
        return {
            
        }
    },    
}
</script>

<style>

</style>
